<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <meta http-equiv="content-language" content="zh"/>
    <meta http-equiv="Cache-Control" content="max-age=7200"/>
    <meta content="chrome=1" http-equiv="X-UA-Compatible"/>
    <link type='text/css' rel='stylesheet' href='/basic/themes/leather/css/bootstrap.css'/>
    <link type='text/css' rel='stylesheet' href='/basic/themes/leather/css/common.css'/>
    <link type='text/css' rel='stylesheet' href='/basic/css/common.css'/>
    <link type='text/css' rel='stylesheet' href='/basic/css/form.css'/>
    <link type='text/css' rel='stylesheet' href='/basic/themes/leather/css/product.css'/>
    <link type='text/css' rel='stylesheet' href='/basic/themes/leather/css/member.css'/>
    <link type='text/css' rel='stylesheet' href='/basic/themes/leather/css/grid.css'/>
    <script type="text/javascript" src="/basic/themes/leather/js/jquery.js"></script>
    <script type="text/javascript" src="/basic/themes/leather/js/bootstrap.js"></script>
    <script type="text/javascript" src="/basic/themes/leather/js/common.js"></script>
    <script type="text/javascript" src="/basic/js/common.js"></script>
    <script type="text/javascript" src="/basic/themes/leather/js/passwordCheck.js"></script>
    <script type="text/javascript" src="/basic/js/holder.js"></script>
    <link rel="stylesheet" type="text/css" href="/basic/assets/488f6928/listview/styles.css" />
    <link rel="stylesheet" type="text/css" href="/basic/assets/2b30688b/highlight.css" />
    <link rel="stylesheet" type="text/css" href="/basic/assets/dc6dbc95/pager.css" />
    <script type="text/javascript" src="/basic/assets/2e76bf2c/jquery.js"></script>
    <script type="text/javascript" src="/basic/assets/2e76bf2c/jquery.ba-bbq.js"></script>
    <script type="text/javascript" src="/basic/themes/leather/js/login_nav.js"></script>
    <title></title>


    <style type="text/css">
        *{margin:0;padding:0;}
    </style>
</head>
<body style="background:#eeeeee">
<div class="top">
    <div class="top_contant">
        <div class="top_left">
            <a rel="sidebar" onclick="addFavorite();" href="http://127.0.0.1/basic/">收藏网站</a><a href="http://localhost/basic">官网</a><a class="sina" href="http://www.sina.com.cn/">新浪</a><a class="mart" href="http://localhost/basic">商城</a>            <span class="cor_red bold font14">Tel: 13967414054</span>
            <a href="/basic/page/contact?key=help">在线客服</a>        </div>

        <div class="top_right">
            <span>您好，欢迎来到演示商城！</span>
            <div class="login-nav"><a href="/basic/user/login">登录</a>            |<a href="/basic/user/registration">注册</a></div>

            <div class="top_daohang">
                <li id="daohang" >网站导航<i>arrow</i>
                    <div class="daohang_box" style="width:250px; display:none;position:absolute;padding:6px; border:0px;box-shadow:0 1px 2px #666;background:#f9f9f9;z-index:10;font-size:12px;">
                        <a href="/"> 官方网站 </a><span style="width: 0;">|</span>
                        <a href="/"> 热卖信息 </a><span style="width: 0;">|</span>
                        <a href="/"> 合作伙伴 </a> <br>
                        <a href="/"> 官方网站 </a><span style="width: 0;">|</span>
                        <a href="/"> 热卖信息 </a><span style="width: 0;">|</span>
                        <a href="/"> 合作伙伴 </a> <br>
                    </div>
                </li>
            </div>
        </div>

    </div>
</div>
<div class="head">
    <div class="logo">
        <a href="http://localhost/basic">
            <img alt=""
                 src="/basic/themes/leather/image/logo.png"
                 width="227" height="80">
        </a></div>
    <form class="search" action="/basic/catalog/index" method="get">    <div class="search_box">
        <input type="text" value="" name="key" id="key" />        <button></button>
    </div>
        <div class="search_hot">
            热门搜索：
            <a href="/basic/catalog/index?key=%E7%9A%AE%E9%9B%95">皮雕</a><a href="/basic/catalog/index?key=%E8%BD%AF%E7%9A%AE">软皮</a><a href="/basic/catalog/index?key=%E5%8E%8B%E8%8A%B1">压花</a>    </div>
    </form>    <a href="/basic/cart/index">
    <div class="shopping_car">
        购物车有<span class="cor_red bold">0</span>件商品
    </div>
</a>
</div>
<div class="nav">
    <ul class="nav_list" id="yw3">
        <li><a href="/basic/site/index">首页</a></li>
        <li><a href="/basic/catalog/index?cat=110">布艺软饰</a></li>
        <li><a href="/basic/catalog/index?cat=111">床上用品</a></li>
        <li><a href="/basic/catalog/index?cat=126">数码产品</a></li>
        <li><a href="/basic/catalog/index?cat=129">精品男装</a></li>
        <li><a href="/basic/catalog/index?cat=130">精品女装</a></li>
        <li class="current"><a href="/basic/post/index">新闻</a></li>
    </ul></div>

<div class="container_24">

    <div class="clearfix"></div>
    <div class="container" style="overflow: hidden">
        <div class="grid_18 alpha">
            <div id="content" style="background: #ffffff;padding: 20px;font-size: 14px;">
                <p>
                    <a class="news-link" href="/basic/site/index">首页</a>>><a href="/basic/post/index" class="news-link">新闻列表</a>>> 关于浮动（float）的最优清除方案推荐
                </p>
                <h3  style="background:#2d2d2d; color: white">关于浮动（float）的最优清除方案推荐</h3>
                <div>
                    <p>
                    <p>对于日新月异的WEB开发技术和浏览器更新频率来说，清除<a href="http://www.icultivator.com/p/tag/%e6%b5%ae%e5%8a%a8" title="查看 浮动 中的全部文章" target="_blank" class="tag_link">浮动</a>已然是一个被人嚼碎了的话题。说是这些年过去了，有关<a href="http://www.icultivator.com/p/tag/float" title="查看 float 中的全部文章" target="_blank" class="tag_link">float</a>的地方，还依然少不了清除浮动的标签和css代码。W3C整天研究html5，就不能抽出点时间来把这种烦人的小细节修正一下吗？抱怨归抱怨，饭还得吃，钱还得挣，清除浮动就不能停止。</p>
                    <p>为了清除浮动增加无语义代码已经是最稳定和简单的方式，但总叫开发者心里感到不舒服，毕竟这么多年来早已习惯了结构和样式的分离，非要在结构中插入这样一行无语义代码就会让人觉得有种难以掌握的感受。</p>
                    <p>通过css代码清除浮动也不省油，光是当前这种多个浏览器瓜分浏览器份额的状况所带来的各种css hack就够让人头疼的了，而且这还没说到那些个浏览器的不同版本之间又有多少的差别。通过css清除浮动还是一个长期的过程，因为你还要期盼下一牌浏览器没有针对浮动修改对html代码的解释。</p>
                    <p>要说在当前这种恶劣的状况下，选取哪种方式去清除浮动最为可取，这事一个人说了不算，要看大家的意见。</p>
                    <p>很多时候，开发人员在前端开发时遇到问题，就会去找那些运用了类似技术的大型网站，去分析它们的解决方案，然后用到自己的网站上，连为什么都省得去想了。我也常常这么做。具体到清除浮动这个问题上，我现在所用的无语义标签法就是在看到某大型网站用过之后，我才选用的。</p>
                    <p>不过今天重提这个问题，是因为我又在一个大型网站上看到了不同的方案。它们是这样做的：</p>
<pre>&lt;style&gt;
.clearfix:after{
        visibility: hidden;
        display: block;
        font-size: 0;
        content: ".";
        clear: both;
        height: 0;
}

* html .clearfix{zoom: 1;}

*:first-child + html .clearfix{zoom: 1;}

&lt;/style&gt;

&lt;div style="border: 2px solid red;"&gt;
    &lt;div style="float: left; width: 80px; height: 80px; border: 1px solid blue;"&gt;
        农夫庄园
    &lt;/div&gt;
&lt;/div&gt;</pre>
                    <p>虽说这是来自大型网站，可信任度很高，可以不去思考而直接用，但学习的态度还是要有，就此分析一下其中的原理。</p>
                    <p>首先是利用:after伪类来兼容支持这一标准的浏览器们，FF、Chrome自然属于强烈支持标准的浏览器行列，不过IE自从繁殖到第八代开始，也表示支持这一伪类。:after伪类用来和content属性一起使用设置在对象后的内容。</p>
                    <p>如果现在不是2012年，而是10年后，可能就不用再往下讲了。但因为现在IE6和IE7还很有势力，所以，我们还得好好照顾它们。:after伪类IE不支持，它用来和content属性一起使用设置在对象后的内容，例如：</p>
                    <pre>.clearfix:after {content:".";}</pre>
                    <p>这个<a href="http://www.icultivator.com/p/tag/css" title="查看 CSS 中的全部文章" target="_blank" class="tag_link">CSS</a>将会让clearfix类标签内的文本后边加上英文句号。</p>
                    <p>"* html"这个选择符只有IE6才能识别，因此在其中设置缩放属性"zoom: 1;"，便可实现兼容IE6；"*:first-child + html"这个选择符只有IE7才能识别，因此设置缩放属性"zoom: 1;" 便可实现兼容IE7。</p>
                    <p>原理分析完毕。方法是可行的，完美解决是不可能的。所以，W3C标准中的浮动一天不变，清除浮动就会一天不止。</p>


                    </p>
                </div>
                <!-- content -->
            </div>
            <div style="border-top:3px solid darkgray;height:800px; background:#ffffff;padding:0 20px;"> <!--留言板-->
                <div class="col-xs-8" style="margin-top: 20px;">
                    <p style="color: red;font-size: 16px;">demo</p>
                    <textarea class="form-control" style="height: 100px;" id="a123"></textarea>
                </div>
                <div class="col-xs-4" style="height:100px;padding: 135px 50px 5px 30px; ">
                    <button class="btn btn-danger " id="submit-comment" style="width:100px;height:30px; font-size:16px;padding:2px 20px;font-family:'楷体' ">发表评论</button>
                </div>
                <script type="text/javascript">

                 window.onload=function(){

                     var oBtn=document.getElementById('submit-comment');
                     var oUl=document.getElementById('comments-list');
                     var oLi=document.getElementById('copy');
                     var oTxt=document.getElementById('a123');

                     oBtn.onclick=function(){

                           var gLi=document.createElement('li');
                           var oPtxt=document.getElementById('author-comment');
                           var ptxt=gLi.getElementsByTagName('p');
                          oPtxt.innerHTML=oTxt.value;
                          gLi.innerHTML=oLi.innerHTML;
                          oUl.insertBefore(gLi,null);

                     };
                 }



                </script>

                <hr/>
                 <div class="col-xs-12" style="margin-top:50px; border-top: 2px dotted darkgray;"><!--评论列表-->
                     <ul id="comments-list" >
                         <li class="clearfix" id="copy">
                             <div style="border-bottom: 1px solid gray; height: 100px;">
                             <div class="col-xs-2 pull-left" style="text-align:center;vertical-align: middle;">
                                 <img src="http://avatar.csdn.net/B/3/2/3_wuyuanjingni.jpg">
                             </div>
                             <div class="col-xs-10 pull-right">
                                 <h4 style="color: red" id="author">demo:</h4>
                                 <p id="author-comment">
                                 这篇文献不错 ，讲得很有理！！赞一个！
                                 </p>
                             </div>
                        </div>
                         </li>


                     </ul>
                     <ul class="pagination pull-right" id="news-pag-two">
                         <li><a href="#">&laquo;</a></li>
                         <li><a href="#">1</a></li>
                         <li><a href="#">2</a></li>
                         <li><a href="#">3</a></li>

                         <li><a href="#">&raquo;</a></li>
                     </ul>
                 </div>
            </div>
            <!-- sidebar -->
        </div>
    </div>
</div>

<div class="footer">
    <div class="foot_c">
        <div class="foot_new">
            <ul>
                <li><span class="font14 bold">新手指南</span></li>
                <li><a href="/basic/user/registration">注册新用户</a></li>
                <li><a href="/basic/page/process">如何订购</a></li>
                <li><a href="/basic/page/modify_order">如何修改订单</a></li>
            </ul>
        </div>
        <div class="foot_pay">
            <ul>
                <li><span class="font14 bold">支付方式</span></li>
                <li><a href="/basic/page/payment">支付方式</a></li>
                <li><a href="/basic/page/onlinepayment">账户提现及退款时效</a></li>
                <li><a href="/basic/page/process">查看账户余额</a></li>
            </ul>
        </div>
        <div class="foot_set">
            <ul>
                <li><span class="font14 bold">配送方式</span></li>
                <li><a href="/basic/page/shipping">配送费用及收费标准</a></li>
                <li><a href="/basic/page/shipping">配送范围及配送时效</a></li>
                <li><a href="/basic/page/shippinginfo">签收注意事项</a></li>
            </ul>
        </div>
        <div class="foot_back">
            <ul>
                <li><span class="font14 bold">退换货服务</span></li>
                <li><a href="/basic/page/return">退换货政策</a></li>
                <li><a href="/basic/page/return">退换货流程</a></li>
                <li><a href="/basic/page/privacy">隐私申明</a></li>
            </ul>
        </div>
        <div class="foot_help">
            <ul>
                <li><span class="font14 bold">帮助中心</span></li>
                <li><a href="/basic/page/problems">常见问题</a></li>
                <li><a href="/basic/page/contact">在线客服</a></li>
                <li><a href="/basic/page/about">关于我们</a></li>
            </ul>
        </div>
        <div class="foot_call">
            <p class="font14 bold">咨询电话</p>

            <p class="font14 bold cor_r">13967414054</p>
        </div>
    </div>
    <div class="foot_u">
        <p class="foot_link">
            <a href="/basic/page/about">关于我们</a>|
            <a href="/basic/page/contact">联系我们</a>|
            <a href="">人才招聘</a>|
            <a href="/basic/page/join">商家入驻</a>|
            <a href="">广告服务</a>|
            <a href="">手机商城</a>|
            <a href="">友情链接</a>|
            <a href="">销售联盟</a>|
            <a href="/basic/index.php">皮雕社区</a>|
            <a href="">资源交流</a>
        </p>

        <p>Copyright ? 2013 - 2015 演示商城 All Rights Reserved. <a href="">站长统计</a></p>

        <p>银河方舟 全程技术支持</p>
    </div>
</div>
<script type="text/javascript" src="/basic/assets/488f6928/listview/jquery.yiilistview.js"></script>
<script type="text/javascript">
    /*<![CDATA[*/
    jQuery(function($) {
        jQuery('#yw0').yiiListView({'ajaxUpdate':['yw0'],'ajaxVar':'ajax','pagerClass':'pager','loadingClass':'list-view-loading','sorterClass':'sorter','enableHistory':false});
    });
    /*]]>*/
</script>


</body>
</html>
